<template>
  <view class="content">
    <block v-for="(item, index) in takeshop" :key="index">
      <view class="content-view" @click="takEout(item.openid)">
        <view class="content-img">
          <image :src="item.logo" mode="aspectFill"></image>
        </view>
        <view class="content-title">
          <text class="conteng-take">{{ item.shop }}</text>
          <view class="conteng-monthly">
            <text>月售200</text>
            <text>约{{ item.duration }}分钟</text>
          </view>
          <view class="conteng-starting">
            <text>起送¥{{ item.delivering }}</text>
            <text>配送¥{{ item.physical }}</text>
            <text>人均¥{{ item.capita }}</text>
          </view>
          <view class="conteng-starting">
            <image src="../../../static/coen/liwu.svg" mode="widthFix"></image>
            <text>{{ item.types }}</text>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>

<script>
export default {
  props: {
    takeshop: Array,
  },
  data() {
    return {
      // 测试 用数据
      tackoutList: [
        {
          logo: '../../../static/you/pm01.png',
          // 商品标题
          shop: '十分粥道(未来科技城店)',
          // 配送时间
          duration: '20',
          // 配送金额
          physical: 0.3,
          // 人均价格
          capita: 20,
          // 菜系
          types: '江浙菜',
          // 起送价
          delivering: 2,
        },
      ],
    }
  },
  methods: {
    takEout(id) {
      console.log('111')
      wx.navigateTo({
        url: '../takeout/takeout?id=' + id,
      })
    },
  },
}
</script>

<style scoped>
/* @import '../../../common/meituan'; */
.content {
  margin-top: 100rpx;
}
.content-view text {
  display: block;
}
.content-view {
  display: flex;
  justify-content: space-between;
  height: 200upx !important;
  overflow: hidden;
  border-bottom: 1rpx solid #e4e8eb;
  padding-bottom: 5upx;
  margin: 30upx 0;
  color: #898989;
}
.content-img {
  width: 350upx !important;
  height: 200upx !important;
}
.content-img image {
  width: 100%;
  height: 100%;
  border-radius: 10upx;
}
.content-title {
  width: 100%;
  padding-left: 10upx;
  font-size: 24upx;
}

.conteng-take {
  color: #333333;
  height: 50upx;
  font-size: 33upx;
  font-weight: bold;
  line-height: 50upx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.conteng-monthly {
  display: flex;
  justify-content: space-between;
  height: 50upx;
  line-height: 50upx;
}
.conteng-starting {
  display: flex;
  align-items: center;
  height: 50upx;
  line-height: 50upx;
}
.conteng-starting text {
  width: 130upx;
}
.conteng-starting image {
  width: 24upx;
  height: 24upx;
  padding-right: 10upx;
}
</style>
